<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            canvas {
                border: 1px solid red;
            }
    </style>
</head>
<body>
        <canvas width="600" height="400"></canvas>
        <script>
            var myCanvas = document.querySelector("canvas");
            var ctx = myCanvas.getContext("2d");

            // 绘制一条线
            // 渐变颜色的填充
            // 线是有点构成的 通过连续的画渐变颜色的点  形成渐变颜色的线
            ctx.lineWidth = 10;
            for (var i = 0; i < 256; i++) {
                ctx.beginPath();
                ctx.moveTo(100+i,100);
                ctx.lineTo(100+i+1,100);
                ctx.strokeStyle = "rgb("+i+","+i+","+i+")";
                ctx.stroke();
            }
            
            
        </script>

</body>
</html>